<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

	{{msg}}
	<!-- <a :href="next">{{login}}</a>
	<hr>

	<a href="#" v-if='isLogin'>个人中心</a>
	<a href="#" v-else>登录</a>
	<hr>

	<span v-if='level === 1'>1</span>
	<span v-else-if='level === 2'>2</span>>
	<span v-else>3</span> -->

	<hr>
	<!-- <button v-on:click='login'>登录</button> -->
	<!-- <button @click='login(counter)'>登录</button> -->  <!-- 简写形式 -->

	<hr>
	<table border="1">
		<tr>
			<td>用户名</td>
			<td>
				<input type="text" name="username" v-model='user'>
			</td>
		</tr>
		<tr>
			<td>密码</td>
			<td>
				<input type="password" name="password" v-model='pwd'>
			</td>
		</tr>
		<tr>
			<td>性别</td>
			<td>
				男	<input type="radio" name="sex" value="boy" v-model='gender'>
				女  <input type="radio" name="sex" value="girl" v-model='gender'>
			</td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				篮球		<input type="checkbox" name="like" value="篮球" v-model='like'>
				足球 	<input type="checkbox" name="like" value="足球" v-model='like'>
				乒乓球	<input type="checkbox" name="like" value="乒乓球" v-model='like'>
			</td>
		</tr>
		<tr>
			<td>城市</td>
			<td>
				<select v-model='city'>
					<option value="bj">北京</option>
					<option value="sh">上海</option>
					<option value="sz">深圳</option>
				</select>
			</td>
		</tr>
		<tr>
			<td >个人简介</td>
			<td>
				<textarea v-model='desc'></textarea>
			</td>
		</tr>
	</table>
	<!-- 注册按钮没有在table里 -->
	<button @click='register'>注册</button>

</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el : '#app',
		data: {
			msg: 'hello vue',
			counter: 5,
			user: '',
			pwd: '',
			gender: '',
			like: [],
			city: '',
			desc: '',
			// login: '登录',
			// next: 'http://www.baidu.com',
			// isLogin: false,
			// level: 2,

		},
		methods:{
			// login: function(num) {
			// 	alert(num)
			// }
			register: function() {
				alert(this.user + this.pwd + this.gender + this.like + this.city + this.desc)
				
			}
		}
	})
</script>
</html>